<template>
    <div class="vot-box">
      <p>恭喜你！投票成功</p>
      <div class="suc-cont">
        <img :src="img" alt="">
        <p>{{name}}</p>
        <p>
          <img :src="'./static/lyl/vote.png'" alt="">
          <span>当前排名第{{rank}}名</span>
        </p>
        <p>{{time}}</p>
      </div>
      <ul>
        <li v-for="(item,index) in sucData" :key="index">
          <router-link :to="item.path">
            {{item.txt}}
          </router-link>
        </li>
      </ul>
    </div>
</template>

<script>
  import * as list from "../../../api/list.js";
    export default {
      name: "Votesucess",
      data(){
        return {
          sucData:[
            {path:'/active',txt:'返回首页'},
            {path:'/vote/4/showout/0/'+this.$route.params.id,txt:'查看排行'},
            {path:'/votecount2/',txt:'投票数量'}
          ],
          img:'',
          name:'',
          rank:'',
          time:''
        }
      },
      beforeMount(){
        let parms = {
          program_id:this.$route.params.id2,
          active_id:this.$route.params.id,
          user_id:this.$store.state.user_id
        };
        list.programVote(parms).then(res=>{
          console.log(res);
          this.img = res.data.img;
          this.name = res.data.name;
          this.rank = res.data.rank;
          this.time = res.data.time;
          this.sucData[2].path = this.sucData[2].path+res.data.video_id+'/'+res.data.program_id;
        })
      },
      mounted(){
        mui.back = function() {
          window.history.go(-1);
        }
      }
    }
</script>

<style scoped>
 .vot-box{
   padding: 20px 40px;
   text-align: center;
 }
 .vot-box>p{
   font-size: 36px;
   color: #884ca4;
   padding: 40px 0;
 }
 .vot-box .suc-cont{
   border: 2px solid #dcdcdc;
   border-radius: 10px;
   padding: 20px 0;
 }
  .vot-box .suc-cont>img{
    width: 150px;
    height: 150px;
    border-radius: 100%;
  }
 .vot-box .suc-cont p:nth-child(2){
   font-size: 32px;
   padding: 30px 0;
 }
 .vot-box .suc-cont p:nth-child(3) img{
   width: 30px;
   height: 35px;
 }
 .vot-box .suc-cont p:nth-child(3) span{
   font-size: 28px;
   color: #444;
 }
 .vot-box .suc-cont p:nth-child(4){
   font-size: 24px;
   color: #8c8c8c;
   padding-top: 10px;
 }
  ul{
    display: flex;
    justify-content: space-around;
    padding: 60px 0;
  }
  ul li{
    width: 126px;
    height: 126px;
    background: #e3bd52;
    line-height: 126px;
    border-radius: 100%;
  }
 ul li:nth-child(2){
   background: #e98345;
 }
 ul li:nth-child(3){
   background: #884ca4;
 }
 ul li a{
   font-size: 24px;
   color: #fff;
 }
</style>
